<template>
	<!-- marketing/components/share-tabs/share-tabs.wxml -->
	<view>
		<a-popup :show="tabsShow1" @close="close" @open="open" mode="top" :custom-style="{
			'width':'702rpx','margin':'360rpx 24rpx 0','border-radius': '16rpx'
		}">
			<view>13</view>
			<view>11</view>
			<view>11</view>
			<view>11</view>
			<view>11</view>
			<view>11</view>

		</a-popup>
	</view>
</template>
<script>
	import aPopup from '@/uni_modules/uview-ui/components/u-popup/u-popup.vue';
	export default {
		components: {
			aPopup
		},
		data() {
			return {
				tabsShow1: true,
				showQrCodePopup: false,
				showPosterPopup: false,
				canvasImg: '',
				//生成的海报图片链接
				posterConfig: {},
				//海报配置信息
				userInfo: {},
				//用户信息
				qrcode: '' //小程序二维码链接
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			// 是否显示tabs弹窗
			tabsShow: {
				type: Boolean,
				default: false
			},
			// 是否显示tabs分享类型 微信好友分享、复制链接、二维码、海报
			tabs: {
				type: Array,
				default: () => ['share', 'link', 'qrcode', 'poster']
			},
			//分享tabs的配置信息 路径和参数用于生成二维码和链接
			shareConfig: {
				type: Object,
				default: () => ({
					path: '',

					//页面路径
					//页面参数
					scene: ''
				})
			}
		},
		mounted() {},
		/**
		 * 组件的方法列表
		 */
		methods: {
			open() {
				// console.log('open');
				this.true = false
			},
			close() {
				this.tabsShow1 = false
				// console.log('close');
			}
		}
	}
</script>
<style lang="less">
	@import '../../../commin/flex.less';

	.share-popup {
		background: #fff;
		height: 221rpx;
		margin: 24rpx;
		border-radius: 16rpx;
		padding: 0 32rpx;

		&__item {
			&::after {
				border: none;
			}

			background: transparent;
			margin: 0;
			padding: 0;
			line-height: 1;
		}

		&__icon {
			width: 106rpx;
			height: 106rpx;
			margin-bottom: 12rpx;
		}

		&__title {
			font-size: 24rpx;
			color: #606266;
		}
	}

	.share-poster {
		&__inner {
			padding: 73rpx 0 40rpx 0;
			width: 703rpx;
			position: relative;

			.inner__close {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				right: 0;
			}

			.inner_bg {
				width: 703rpx;
				height: 1123rpx;
				background: #fff;
				margin-top: 70rpx;
				border-radius: 16rpx;
				margin-bottom: 64rpx;
			}

			.inner_btn {
				width: 680rpx;
				height: 88rpx;
				background: #000000;
				border-radius: 44rpx;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}

	.qr-code {
		width: 702rpx;
		height: 730rpx;
		border-radius: 16rpx;
		background: #fff;
		position: relative;
		padding-top: 80rpx;
		box-sizing: border-box;

		&__close {
			position: absolute;
			width: 42rpx;
			height: 42rpx;
			bottom: -60rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		&__img {
			width: 443rpx;
			height: 443rpx;
			margin-bottom: 80rpx;
		}

		&__btn {
			width: 270rpx;
			height: 88rpx;
			background: linear-gradient(105deg, #2b99ff, #1b8cf5);
			box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
			border-radius: 44rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}
</style>
